<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>会员卡中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/hykcz.css" />
	</head>
	<style>
		.qrfk_hyczbtnbox {
			text-align: left;
			padding: 5% 0 0 80%;
			position: absolute;
			width: 100%;
		}
		.tanchubox{ 
			overflow:auto;
			height: 350px; 
		}
		
		.qrfk_hyczbtnbox .qrfkb_czkbtn {
			border-radius: 5px;
			display: inline-block;
			vertical-align: middle;
			font-size: .85rem;
			padding: .1rem .5rem .2rem;
			background: #0093DA;
		}
		
		input[type=number] {
			width: 60%;
		}
		.yzm_btn{width: 35%; float: right; background: #CCCCCC; text-align: center; font-size: .85rem; height: 40px; line-height: 40px; border-radius: 5px; color: #000000;}
	   .sytc_qrbtnbox {
		    position: absolute; 
		    width: 100%;
		    height: 45px;
		    background: white;
		    display: table;
		    border-top: 1px solid #E1E1E1; 
		    bottom: 0px;  
		    margin-left: -15px; 
		}
		.sytc_qrbtnbox a {
		    display: table-cell;
		    vertical-align: middle;
		    width: 40%;
		    border-right: 1px solid #E1E1E1;
		    text-align: center;
		    color: #555555;
		}
		#change_but1{
			border-right: none;  
		}
		label{
			display: inline-block;
            width: 38%; 
		}
		.zhuanz_item{
			margin-bottom: 10px;
		}
		.mask {
		    height: 100%;
		    position: fixed;
		    display: none;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    background: rgba(0,0,0,.5);
		    display: block;
		} 
	</style>

	<body class="czfa_content">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">会员卡中心</h1>
		</header>
		<div class="mui-content czfa_content">
			<div class="qrfkb_czk clearfix" style="margin-top: 10px;">
				<div class="top">
					<div class="top_left"><img class="top_img" src="{$user.logo}" /></div>
					<div class="top_right">
						<p>鸿运酒店</p>
						<p>{$user.name}</p>
					</div>

					<div class="qrfk_hyczbtnbox">
						<a href="javascript:;" class="qrfkb_czkbtn">转账</a>
					</div>

				</div>
				<div class="idnum">ID:{$user.id}</div>
				<div class="mnum">{$user.balance}</div>
			</div>
			<div class="tab_line">
				<div class="tab_d hx"><a href="{:url('member/money',['type'=>2])}">消费明细 </a></div>
				<div class="tab_d hz"><a href="{:url('member/money',['type'=>1])}">充值明细  </a></div>
				<div class="tab_d zz"><a href="{:url('member/money',['type'=>6])}">转账明细 </a></div>
			</div>
			<ul class="quan_hslist"> 
				 {volist name='list' id='vo'}
				<li style="margin-top: 5px;">
				    <a href="javascript:;" class="clearfix"> 
						<div class="quan_sjinfo"> 
							<div class="quan_spstyle"> 
								{if condition="$vo.type eq 6"}
								    转出给会员{$vo.mobile}
								{elseif condition="$vo.type eq 7"}
								    由会员{$vo.mobile}转入
								{elseif condition="$vo.type eq 1"}
								    {$vo.store_name ? $vo.store_name : '后台充值'}
								{elseif condition="$vo.type eq 9"}
								{$vo.msg}
								{else}
								{$vo.store_name}
								{/if} 
								<span style="float: right;color: #22AB38;">￥{$vo.balance}</span></div> 
							<div class="quan_spstyle">{$vo.time}</div>
						</div>
					</a>
				</li>
				{/volist}
				{empty name="list"} 
				<div style="text-align: center;margin-top: 150px;">暂无相关数据</div>
				{/empty}
			</ul>
		</div> 
		<!--转赠弹框-->
		<form method="post" id="my_form">
			<div class="tanchubox" style="display: none;">
	 			<div class="zhuanz_item">
					<div class="top clearfix">
						<label>转账账号</label>
						<input type="number" name="mobile" id='mobile' placeholder="请输入手机号码"/>						
					</div> 				
				</div> 
				<div class="zhuanz_item" style="margin-top: 20px;">
					<div class="top clearfix">
						<label>转账金额</label>
						<input type="number" id='balance' name="balance" placeholder="请输入转账金额"/>						
					</div> 				
				</div>   
	            <div class="zhuanz_item yzm clearfix" style="margin-top: 20px;">
					<input type="number" name="yzm" id="yzm" placeholder="请输入验证码" size="10">
					<a href="#" class="yzm_btn" id="send_code">获取验证码</a>
				</div>
				<div class="sytc_qrbtnbox">
					<a href="#" class="shuax" id="change_but" onclick="hide_tc()">取消</a>
					<a href="#" class="shuax" id="btn">确定</a>
				</div>
				<div class="close" onclick="hide_tc()"><span class="mui-icon mui-icon-closeempty"></span></div>	
			</div>
			<input type="hidden" name="money" value="{$user.balance}"/>
			<div class="mask" style="display: none;"></div>
		</form>
	</body>

</html>
{include file="public/footer" /}
<script>
	$('.qrfkb_czkbtn').click(function(){
	 	$('.tanchubox').show();
	 	$('.mask').show();
	});
	//关闭弹层框和笼罩层
	function hide_tc(){
	 	$('.tanchubox').hide();
	 	$('.mask').hide();
	 	$('#mobile').val('');
	 	$('#yzm').val('');
	 	$('#num').val('');
	}
	 
	var onoff = true;
	//获取验证码
	$('#send_code').click(function() {
		//false就不能发送
		if(!onoff) {
			return;
		}
		onoff = false;
		//点击玩按钮干什么?
		//发验证码? 
		// 1-给谁发? 手机号码
		var phone = "{$user.mobile}";  
		$.ajax({
			type:"post",
			//请求的url
			//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
			url: "{:url('index/index/verify_code')}",
			//请求的过程中传递过去的参数 json
			data: {
				mobile: phone,
			},
			//成功了的回调，并且带有返回值
			success: function(data) {
				mui.toast(data.msg);
				var num = 60;
				var timer = setInterval(function() {
					num--;
					if(num == 0) {
						$('#send_code').text('发送验证码');
						//定时器停了
						clearInterval(timer);
						onoff = true;
					} else {
						$('#send_code').text(num + 'S');
					}
				}, 1000); // 1000 毫秒==1秒
			}
		})
	});
	
	$('#btn').click(function(){
		var phone = $('#mobile').val(); 
    	var yzm = $('#yzm').val();
    	var balance = $('#balance').val();
    	var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/; //验证规则  
    	if(!phone){
    		mui.toast('请填写手机号码');
			return false;
    	}
		if(!reg.test(phone)) {
			mui.toast('手机号码格式不正确'); 
			return;
		}
		if(!balance){
    		mui.toast('请填写转账金额');
			return false;
    	}
    	if(yzm.trim() == '') {
			mui.toast('验证码不能为空');
			return;
		} 
		btn.disabled = true;
		setTimeout(function() {
			btn.disabled = false;
		}, 1500);
		$.ajax({
			url: "{:url('index/member/zz')}",
			data: $('#my_form').serialize(),
			type: 'post',
			async: false,
			success: function(res) { 
			    if(res.code == 1) {
			    	hide_tc();
                    mui.toast(res.msg); 
                } else {
                   mui.toast(res.msg);
                }
			}
		})
	});
	
	$(function(){ 
		var type = "{$type}";
		if(type == 6){
			$('.zz').addClass("active");
			$('.hx').removeClass("active");
			$('.hz').removeClass("active");
		}else if(type == 1){
			$('.hz').addClass("active");
			$('.zz').removeClass("active");
			$('.hx').removeClass("active");
		}else{
			$('.hx').addClass("active");
			$('.zz').removeClass("active");
			$('.hz').removeClass("active");
		}
	}); 
</script>